import React, { FC, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";

import axios from "axios";
import Left from "../../css/zh/icon/left.svg?react";
import { ImageUploader, Button, Space } from "antd-mobile";
import { PictureOutline } from "antd-mobile-icons";
import Qb from "../../css/zh/icon/qb.svg?react";
import store from "../../redux";
import "../../css/zh/xin.css";

export default function Xin() {
  const navigate = useNavigate();
  const input = useRef(null);
  const [fileList, setFileList] = useState([]);
  const [name, setName] = useState("");
  const [title, setTitle] = useState("");
  const [time, setTime] = useState("");
  const [email, setEmail] = useState("1");
  const [phone, setPhone] = useState("");
  const [img, setImg] = useState("");
  const [address, setAddress] = useState("");
  const onOpen = () => {
    const nativeInput = input.current?.nativeElement;
    if (nativeInput) {
      nativeInput.click();
    }
  };
  const mockUpload = async (file) => {
    const formData = new FormData();
    formData.append("file", file);

    try {
      const response = await axios
        .post("http://localhost:3000/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((req, res) => {
          console.log(req.data.path);
          setImg(req.data.path);
        });
      setFileList([...fileList, { url: response.data.fileUrl }]);
    } catch (error) {
      console.error("上传失败:", error);
    }
    return {
      url: URL.createObjectURL(file),
    };
  };
  const adds = () => {
    store.dispatch({
      type: "ADDS",
      name: name,
      title: title,
      time: time,
      phone: phone,
      address: address,
      img: img,
    });
  };
  return (
    <>
      <h1 className="xin-h1">
        <Left className="xin-left"></Left>
        <span>账户信息</span>
      </h1>
      <div className="xin-tu">
        <ImageUploader
          onChange={setFileList}
          showUpload={false}
          ref={input}
          value={fileList}
          upload={mockUpload}
        />
      </div>
      <button className="xin_btn" onClick={onOpen}>
        <Qb className="icon_qb"></Qb>
      </button>
      <div className="xin_div">
        <input
          onChange={(val) => {
            setName(val.target.value);
          }}
          type="text"
          placeholder="姓名"
        />
        <input
          onChange={(val) => {
            setTitle(val.target.value);
          }}
          type="text"
          placeholder="昵称"
        />
        <input
          onChange={(val) => {
            setTime(val.target.value);
          }}
          type="text"
          placeholder="出生日期"
        />
        <input value={email} disabled type="text" placeholder="Email" />
        <input
          onChange={(val) => {
            setPhone(val.target.value);
          }}
          type="text"
          placeholder="电话号码"
        />
        <input
          onChange={(val) => {
            setAddress(val.target.value);
          }}
          type="text"
          placeholder="地址"
        />
      </div>
      <div
        onClick={() => {
          adds();
          navigate("/qrt");
        }}
        style={{ textAlign: "center" }}
      >
        <button className="xin_btn2">下一步</button>
      </div>
    </>
  );
}
